<template>
  <div>
    <el-table
      v-loading="loading"
      size="small"
      :fit="true"
      height="420"
      :data="songList"
      style="width: 699px"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="name" label="歌曲名"> </el-table-column>
      <el-table-column prop="artist" label="歌手"> </el-table-column>
      <el-table-column prop="album" label="专辑"> </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            style="border: none"
            icon="el-icon-headset"
            size="mini"
            @click="onplay(scope.row)"
          ></el-button>
          <el-button
            v-if="add"
            style="border: none"
            icon="el-icon-plus"
            size="mini"
            @click="onadd(scope.row)"
          ></el-button>
          <el-button
            v-if="download"
            style="border: none"
            icon="el-icon-download"
            size="mini"
            @click="ondownload(scope.row)"
          ></el-button>
          <el-button
            v-if="remove"
            style="border: none"
            icon="el-icon-close"
            size="mini"
            @click="onremove(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column prop="songTimeMinutes" label="时长" width="80">
      </el-table-column>

      <template v-slot:append>
        <div
          class="pagination"
          :style="'width:' + paginationWidth + 'px;overflow:hidden'"
        >
          <el-pagination
            @current-change="onpagechangeHandler"
            background
            layout="prev, pager, next"
            :page-size="30"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // 判断是否下载列表
    add: {
      type: Boolean,
      default: false,
    },
    download: {
      type: Boolean,
      default: false,
    },
    remove: {
      type: Boolean,
      default: false,
    },
    totalCount: {
      require: true,
      type: Number,
    },
    source: {
      type: String,
    },
    songList: {
      require: true,
      type: Array,
    },
    loading: {
      default: false,
      type: Boolean,
    },
  },
  methods: {
    // 添加到试听列表
    onadd(e) {
      this.$listeners.onadd && this.$listeners.onadd(e);
    },

    // 移除下载管理
    onremove(e) {
      this.$listeners.onremove && this.$listeners.onremove(e);
    },

    // 换页
    onpagechangeHandler(page) {
      this.$listeners.onchangePage && this.$listeners.onchangePage(page);
    },

    // 点击播放
    async onplay(e) {
      this.$listeners.onplay && this.$listeners.onplay(e);
    },

    // 下载音乐
    ondownload(e) {
      this.$listeners.ondownload && this.$listeners.ondownload(e);
    },
  },
  computed: {
    // 分页的宽度
    paginationWidth() {
      let width = Math.ceil(this.totalCount / 30) * 60;
      if (width > 450) return 450;
      if (width < 150) return 150;
      return width;
    },
  },
};
</script>

<style lang="scss">
// 滚动条
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-thumb {
  width: 100%;
  background-color: #4daf7c;
  border-radius: 50%;
}

::-webkit-scrollbar-track {
  width: 100%;
  background-color: #bae4ce;
}

// 多选框
.el-checkbox__inner:hover {
  border-color: #4daf7c;
}

.el-checkbox__input.is-focus .el-checkbox_inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner,
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #4daf7c;
  border-color: #4daf7c;
}

// 操作按钮
.el-button:hover {
  color: #333;
  background-color: #cde6d9;
}

// 分页居中
.pagination {
  margin: 0 auto;
  padding: 10px 0;
}

// 分页颜色
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background: #4daf7c;
}
.el-pagination.is-background .el-pager li:not(.disabled):hover {
  color: #4daf7c;
}
</style>
